import React, { createContext, useContext, ReactNode } from 'react';
import { useResponsive } from '../utils/ResponsiveUtils';

// 创建响应式上下文
type ResponsiveContextType = ReturnType<typeof useResponsive>;

const ResponsiveContext = createContext<ResponsiveContextType | undefined>(undefined);

// 响应式提供者组件
export const ResponsiveProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  const responsiveValues = useResponsive();
  
  return (
    <ResponsiveContext.Provider value={responsiveValues}>
      {children}
    </ResponsiveContext.Provider>
  );
};

// 使用响应式Hook
export const useResponsiveContext = () => {
  const context = useContext(ResponsiveContext);
  if (context === undefined) {
    throw new Error('useResponsiveContext必须在ResponsiveProvider内部使用');
  }
  return context;
}; 